<template>
  <Drawer
    v-model:visible="visible"
    class="custom-class"
    title="租户资源统计"
    width="100%"
    :destroyOnClose="true"
    placement="right"
  >
    <Divider orientation="left"><span style="margin-right: 8px; font-weight: bolder">租户基本信息</span></Divider>
    <div class="md:flex mb-10">
      <BasicInfoCard class="!md:mx-7 w-1/5 h-30 enter-x" title="已订阅应用数" :count="basicData.subscribedApps"></BasicInfoCard>
      <BasicInfoCard class="!md:mr-7 w-1/5 h-30 enter-x" title="数据库数" :count="basicData.databases"></BasicInfoCard>
      <BasicInfoCard class="!md:mr-7 w-1/5 h-30 enter-x" title="命名空间数" :count="basicData.namespaces"></BasicInfoCard>
      <BasicInfoCard class="!md:mr-7 w-1/5 h-30 enter-x" title="工作负载数" :count="basicData.deployments"></BasicInfoCard>
      <BasicInfoCard class="!md:mr-7 w-1/5 h-30 enter-x" title="应用数" :count="basicData.apps"></BasicInfoCard>
    </div>
    <div class="md:flex mb-10">
      <BasicInfoCard class="!md:mx-7 w-1/5 h-30 enter-x" title="服务数" :count="basicData.services"></BasicInfoCard>
      <BasicInfoCard class="!md:mr-7 w-1/5 h-30 enter-x" title="ECS数" :count="basicData.ecs"></BasicInfoCard>
      <BasicInfoCard class="!md:mr-7 w-1/5 h-30 enter-x" title="管理面部署策略" :count="basicData.deploymentStrategy"></BasicInfoCard>
      <BasicInfoCard class="!md:mr-7 w-1/5 h-30 enter-x" title="用户数" :count="basicData.userCounts"></BasicInfoCard>
      <BasicInfoCard class="!md:mr-7 w-1/5 h-30 enter-x" title="组织数" :count="basicData.orgCounts"></BasicInfoCard>
    </div>
    <Divider orientation="left"><span style="margin-right: 8px; font-weight: bolder">操作日志</span></Divider>
    <div class="md:flex m-10">
      <LogTable :tenantCode="dataParams"></LogTable>
    </div>
    <Divider orientation="left"><span style="margin-right: 8px; font-weight: bolder">订阅应用列表</span></Divider>
    <div class="md:flex m-10">
      <SubscribedTable :tenantCode="dataParams"></SubscribedTable>
    </div>
    <div class="absolute bottom-10 right-8">
      <AButton style="margin-right: 8px; font-weight: bolder" @click="onClose">取消</AButton>
      <AButton type="primary" style="font-weight: bolder" @click="onClose">确定</AButton>
    </div>
  </Drawer>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { Button, Divider, Drawer } from 'ant-design-vue';
import BasicInfoCard from '/@/views/maintenance-center/resource-monitor/for-tenant/components/basicInfoCard.vue';
import LogTable from '/@/views/maintenance-center/resource-monitor/for-tenant/components/logTable.vue';
import SubscribedTable from '/@/views/maintenance-center/resource-monitor/for-tenant/components/subscribedTable.vue';
import { getTenantBasicInfo } from '/@/api/maintenance-center/resource-monitor/for-tenant/resourceMonitor';

export default defineComponent({
  components: {
    SubscribedTable,
    LogTable,
    BasicInfoCard,
    Drawer,
    AButton: Button,
    Divider,
  },

  setup() {
    const visible = ref<boolean>(false);
    const basicData = ref({});
    const dataParams = ref('');

    const showDrawer = async (params) => {
      dataParams.value = params;
      basicData.value = await getTenantBasicInfo({ tenantCode: dataParams.value });
      visible.value = true;
    };

    const onClose = () => {
      visible.value = false;
    };
    return {
      visible,
      basicData,
      dataParams,
      showDrawer,
      onClose,
    };
  },
});
</script>
